<template>
  <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
    <el-form-item label="咨询师昵称">
      <el-input v-model="queryInfo.realName" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getConsultant">搜索</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column prop="consultantId" label="编号" width="80" />
    <el-table-column prop="realName" label="姓名" />
    <el-table-column prop="levelId" label="等级">
      <template #default="scope">
        <span v-if="scope.row.levelId == 1">一级咨询师</span>
        <span v-else-if="scope.row.levelId == 2">二级咨询师</span>
        <span v-else>三级咨询师</span>
      </template>
    </el-table-column>
    <<el-table-column label="操作">
    <template #default="scope">
      <el-button size="small" @click="handleEdit(scope.row)">
        修改
      </el-button>
      <el-button size="small" type="danger" @click="handleDelete(scope.row.consultantId)">
        删除
      </el-button>
    </template>
  </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
      v-model:current-page="queryInfo.pageNum"
      v-model:page-size="queryInfo.pageSize"
      :page-sizes="[1, 5, 10, 20]"
      :size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
  <!-- 添加修改 对话框 -->
  <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
    <el-form :model="Consultants">
      <el-form-item label="用户编号" :label-width="formLabelWidth">
        <el-input v-model="Consultants.consultantId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="等级" :label-width="formLabelWidth">
        <el-select v-model="Consultants.levelId" placeholder="请选择等级" clearable>
          <el-option label="一级咨询师" value="1" />
          <el-option label="二级咨询师" value="2" />
          <el-option label="三级咨询师" value="3" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="saveOrUpdate">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref, onMounted } from 'vue'
const formLabelWidth = ref('120px')
const saveOrUpdateVisible = ref(false)
const saveOrUpdateTitle = ref('')
const tableData = ref([])
const total = ref(0)
const avatar = ref('')
const fileList = ref([]);
const Consultants = ref([{
  consultantId: '',

  levelId: '',
}])

// 图片上传保存
const handleAvatarSuccess = (response, uploadFile) => {
  avatar.value = URL.createObjectURL(uploadFile.raw);
  // 假设后端返回的响应中包含上传成功的文件路径
  Consultants.value.avatar = response.data;

}
// 分页
// 当用户改变每页显示的条目数时触发
const handleSizeChange = (pageSize) => {
  queryInfo.value.pageSize = pageSize;
  getConsultant();
}
// 当用户改变当前页码时触发
const handleCurrentChange = (pageNum) => {
  queryInfo.value.pageNum = pageNum;
  getConsultant();
}
// 保存或更新
const saveOrUpdate = () => {
  if (saveOrUpdateTitle.value == '添加用户表') {
    // 调用后端接口添加
    axios.post('/consultants/insert',Consultants.value)
        .then(resp => {
          let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
          if (result.code == 1) {
            // 重新获取列表
            getConsultant();
            ElMessage.success('添加咨询师成功')
          } else {
            // console.log('添加文章失败')
            ElMessage.warning('添加咨询师失败')
          }
        })
  } else {
    // 调用后端接口修改
    axios.put('/consultants/updateById', Consultants.value)
        .then(resp => {
          let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
          if (result.code == 1) {
            // 重新获取列表
            getConsultant();
            ElMessage.success('修改成功')
          } else {
            // console.log('修改文章失败')
            ElMessage.warning('修改失败')
          }
        })
  }
  // 关闭弹框
  saveOrUpdateVisible.value = false;
  Consultants.value = {
    consultantId: '',
    realName: '',
    levelId: '',};
}
// 修改
const handleEdit = (row) => {
  saveOrUpdateTitle.value = '修改'
  saveOrUpdateVisible.value = true
  Consultants.value = row
  // console.log(url+ row.imageUrl)
  avatar.value = url + row.avatar
}
// 取消修改或保存
const close = () => {
  saveOrUpdateVisible.value = false;
  Consultants.value = {
    consultantId: '',
    realName: '',
    levelId: '',};
}
// 定义一个页面加载函数
onMounted(() => {
  // 获取用户列表
  getConsultant();
})
const queryInfo = ref({
  pageNum: 1,
  pageSize: 5,
  realName: ''

})
// 查询用户列表
const getConsultant = () => {
  axios.get('/consultants/selectBySelective', { params: queryInfo.value })
      .then(resp => {
        console.log(queryInfo.value)
        console.log(resp.data)
        let result = resp.data;
        total.value = result.data.total
        if (result.code == 1) {
          tableData.value = result.data.list
        } else {
          console.log('获取咨询师列表失败')
        }
      })
}
// 删除
const handleDelete = (consultantId) => {
  ElMessageBox.confirm(
      '真的要删除吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        axios.delete('/consultants/deleteById', {
          params: { id: consultantId }
        })
            .then(resp => {
              let result = resp.data;
              if (result.code == 1) {
                getConsultant();
                ElMessage({
                  message: '删除成功！',
                  type: 'success',
                })
              } else {
                ElMessage({
                  message: '删除失败！',
                  type: 'warning',
                })
              }
            })
      })
}


</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>